<template>
  <div class="fllb">
    <!-- 下拉菜单 -->
      <van-dropdown-menu class="dropdown">
      <van-dropdown-item v-model="value" :options="option" @change="price(value)" />
    </van-dropdown-menu>

    <!-- 商品卡片 -->
    <Pagination :goodsList="goodsList"></Pagination>
  </div>
</template>
<script>
import { categorybrandprolist } from '../../api/index'
import Pagination from '@/components/Pagination'
import mixins from '@/mixins'
export default {
  mixins: [mixins],
  components: {
    Pagination
  },
  data () {
    return {
      value: 'a',
      option: [
        { text: '默认排序', value: 'a' },
        { text: '价格升序', value: 'b' },
        { text: '价格倒序', value: 'c' }
      ],
      goodsList: []
    }
  },
  methods: {
    // 商品价格升序倒序
    price (value) {
      if (value === 'b') {
        this.goodsList.sort(function (a, b) {
          return a.originprice - b.originprice
        })
        console.log(this.goodsList.originprice)
      }
      if (value === 'c') {
        this.goodsList.sort(function (a, b) {
          return b.originprice - a.originprice
        })
      }
    },
    onLoad() {
      setTimeout(async () => {
        await this.getGoodsList()
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.count >= this.total) {
          this.finished = true
        }
      }, 2000)
    }
  },
  // 获取商品信息
  mounted () {
    this.zhonglei = localStorage.getItem('zhonglei')
    this.paizi = this.$route.params.proid
    categorybrandprolist({
      count: 1,
      limitNum: 10,
      category: this.zhonglei,
      brand: this.paizi
    }).then(res => {
      this.goodsList = res.data.data
    })
  }

}
</script>
<style lang="scss">
.app {
  .van-dropdown-menu{
    margin-top: 54px;
  }
  .main {
    .van-card__price {
      color: red;
    }
  }
}
</style>